* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  transition: all 1500ms ease-in-out;
  background: linear-gradient(to bottom right, #076c78 0%, #03112c 0%, #3f18eb 80%, #e9b777 90%, #b14e0c 100%) no-repeat;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #ffffff;
  font-weight: 700;
  font-size: 25px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-size: 100rem;
  animation: ShopBackground 10s linear infinite;
}
@keyframes ShopBackground {
  0% {
    background-position-x: 100%;
  }
}
.nav {
  transition: all 1500ms ease-in-out;
  width: 100vw;
  height: 10vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #ffffff;
  color: #3f18eb;
  font-weight: 700;
  font-size: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  list-style: none;
}
.nav li {
  transition: background-color 700ms ease-in-out, color 700ms ease-in-out, font-size 700ms ease-in-out;
  display: inline-flex;
  width: 25%;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #3f18eb;
  font-weight: 700;
  font-size: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  cursor: pointer;
  height: 10vh;
}
.nav a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #3f18eb;
  text-decoration: none;
  transition: color 700ms ease-in-out, font-size 700ms ease-in-out;
}
.nav li:hover {
  background: #3f18eb;
  color: #ffffff;
  font-size: 25px;
}
.nav li:hover a {
  color: #ffffff;
  font-size: 25px;
}
#page1 {
  transition: all 1500ms ease-in-out;
  background: #ffffff00;
  width: 50vw;
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  flex-direction: column;
  font-weight: 700;
  font-size: 25px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  border: #ffffff00 solid 1px;
  border-radius: 10px;
}
#page1 #GetShop {
  transition: all 1500ms ease-in-out;
  background: #ffffff00;
  border-radius: 10px;
  border: #ffffff00 solid 1px;
  outline: none;
}
#page1 button {
  transition: all 1500ms ease-in-out;
  background: #ffffff00;
  border-radius: 10px;
  border: #ffffff00 solid 1px;
  color: #3f18eb;
  font-weight: 700;
  font-size: 20px;
}
#page1:hover {
  transition: all 1500ms ease-in-out;
  background: #ffffff00;
  border-radius: 10px;
  border: #ffffff00 solid 1px;
  color: #3f18eb;
  font-weight: 700;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#page1 #GetShop:hover {
  transition: all 1500ms ease-in-out;
  background: #090f5f;
  border-radius: 10px;
  border: #3134ff solid 1px;
  color: #18d2eb;
  outline: none;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
  font-weight: 700;
  padding-left: 20px;
  text-align: center;
  text-shadow: 0px 0px 10px #31cfff;
}
